<template>
  <a-card title="购物车">
<!--    <a-empty-->
<!--      image="https://gw.alipayobjects.com/mdn/miniapp_social/afts/img/A*pevERLJC9v0AAAAAAAAAAABjAQAAAQ/original"-->
<!--      :image-style="{-->
<!--      height: '60px',-->
<!--    }"-->
<!--    >-->
<!--      <span slot="description"> 购物车空空如也~~ </span>-->
<!--      <a-button type="danger">-->
<!--        去逛逛-->
<!--      </a-button>-->
<!--    </a-empty>-->
    <div class="table-operator">
      <s-table
        ref="table"
        :columns="cartColumns"
        :data="cartData"
        :row-key="(record) => record.id"
        :show-pagination="false"
        :row-selection="rowSelection"
      >
        <template slot="footer">
          <div :style="{ textAlign: 'right' }">
            <a-space align="center" size="large">
              <div>已选{{selectedRowKeys.length}}件</div>
              <div>应付金额：￥{{amount}}</div>
              <div><a-button :disabled="selectedRowKeys.length == 0" size="large" type="danger" @click="confirmOrder">去结算</a-button></div>
            </a-space>
          </div>
        </template>
        <template slot="name" slot-scope="text,record">
          <div class="product-cover">
            <dl>
              <dd>
                <img width="88" height="88" :src="record.image" />
              </dd>
              <dt>
                <h4>{{record.name}}</h4>
                <p><ellipsis :length="30">{{record.describe}}</ellipsis></p>
                <a-tag></a-tag>
              </dt>
            </dl>
          </div>
        </template>
        <template slot="price" slot-scope="text">
          ￥{{text}}
        </template>
        <template slot="cart_num">
          <a-input-number :min="1" :max="1" :default-value="1" />
        </template>
        <template slot="amount" slot-scope="text,record">
          <span class="txt">￥{{record.price}}</span>
        </template>
        <template slot="action" slot-scope="text,record">
          <a-button type="link" @click="addCollect(record.gid)">添加收藏夹</a-button>
          <a-button type="link" @click="delCart(record.id)">删除</a-button>
        </template>
      </s-table>
    </div>
  </a-card>
</template>

<script>
import { STable } from '@/components'
import { delCart, getCartList } from '@/api/cart'
import { addCollect } from '@/api/collect'
import Ellipsis from '@/components/Ellipsis/Ellipsis'

export default {
  components: {
    Ellipsis,
    STable
  },
  name: 'Cart',
  data () {
    const cartColumns = [
      {
        title: '服务信息',
        scopedSlots: { customRender: 'name' }
      },
      {
        title: '单价',
        dataIndex: 'price',
        scopedSlots: { customRender: 'price' }
      },
      {
        title: '数量',
        scopedSlots: { customRender: 'cart_num' }
      },
      {
        title: '金额',
        dataIndex: 'amount',
        scopedSlots: { customRender: 'amount' }
      },
      {
        title: '操作',
        dataIndex: 'action',
        scopedSlots: { customRender: 'action' },
        width: '100px'
      }
    ]
    return {
      cartColumns,
      cartData: parameters => {
        return getCartList(parameters).then(res => {
          return res.result
        })
      },
      selectedRowKeys: [],
      amount: 0
    }
  },
  computed: {
    rowSelection () {
      return {
        selectedRowKeys: this.selectedRowKeys,
        onChange: this.onSelectChange
      }
    }
  },
  methods: {
    onSelectChange (selectedRowKeys, selectedRows) {
      let amount = 0
      for (let i = 0; i < selectedRows.length; i++) {
        amount = amount + parseInt(selectedRows[i].price)
      }
      this.amount = amount.toFixed(2)
      this.selectedRowKeys = selectedRowKeys
    },
    addCollect (id) {
      const data = {}
      data['gid'] = id
      addCollect(data).then(res => {
        if (res.status === 0) {
          this.$message.success('添加收藏夹成功')
        }
      })
    },
    delCart (id) {
      delCart(id).then(res => {
        if (res.status === 0) {
          this.$refs.table.refresh(true)
        }
      })
    },
    confirmOrder () {
      this.$router.push({ name: 'OrdinaryPay', query: { ids: this.selectedRowKeys } })
    }
  }
}
</script>

<style scoped>
  .product-cover dl dd {
    width:88px;
    float:left;
    margin-right:20px;
  }
  .product-cover dl dt h4 {
    font-size: 16px;
  }
  .txt {
    font-size: 16px;
    font-weight: bold;
    color: #e52e3a;
  }
</style>
